<template>
  <div class="hello">
    <winter-sweet-ui :parameter="pars">
      <el-table-column
          fixed="right"
          label="操作"
      >
        <template slot-scope="scope">
          <el-button @click="viewDetail(scope.row)" type="text" size="small">详情</el-button>
          <el-button type="text" size="small">文件</el-button>
          <el-button type="text" size="small">图片</el-button>
        </template>
      </el-table-column>
    </winter-sweet-ui>
    <div id="myChart" :style="{ height: '640px'}"></div>
    <div id="main" :style="{ height: '640px'}"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      pars: {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        fields: [
          {
            label: '日期',
            prop: 'date'
          },
          {
            label: '姓名',
            prop: 'name'
          },
          {
            label: '地址',
            prop: 'address'
          }
        ],
        height: '800'
      },

    }
  },
  mounted() {
    this.drawLine();
    this.drawPie();
    this.gettongji();
  },
  methods:{
    viewDetail(row) {
      //保存id
      this.$store.commit('setid', row.id)

      this.showDataTable = false;
      this.showDetail = true;
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      });
    },
    drawPie() {
      let myChart = this.$echarts.init(document.getElementById("main"));
      myChart.setOption({
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        }
          }
      )
    },
    gettongji(){
      const url = 'http://1.15.70.177:9090/timeline/add';
      this.$http.post(url).then(
          response => {
            const result = response.data.items[0];
            console.log(result)
            this.repositoryUrl = result.html_url;
            this.repositoryName = result.name;
          },
          response => {
            alert('请求失败');
          },
      );
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
